<script setup>
import {routes} from "@/components/Index.js";
</script>

<template>
  <div class="main">
    <h1 class="rainbow">Hello World!</h1>
    <ul class="menu">
      <template v-for="{path, text} in routes">
        <li v-if="path!=='/'">
          <router-link :to="path">{{ text }}</router-link>
        </li>
      </template>
    </ul>
  </div>
</template>

<style scoped>

.rainbow {
  background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline; /* 确保文字不会被其他布局属性影响 */
  font-size: 100px;
}

.menu {
  max-width: 400px;
  margin: 40px auto;
  padding: 30px 20px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.menu li {
  list-style-type: none;
}

.menu a {
  display: inline-block;
  width: 80%; /* 所有按钮宽度一致 */
  margin: 10px 0;
  padding: 10px 20px;
  background: linear-gradient(135deg, #6dd5ed, #2193b0); /* 渐变蓝色 */
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.menu a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #2193b0, #6dd5ed); /* 渐变反转 */
}
</style>